<template>
	<view class="regBg">
		<view class="regBox">
			<view class="flex justify-center">
				<h2>艺团</h2>
			</view>
			<view class="flex justify-center text-gray">
				<p>愿你余光皆是美景！</p>
			</view>
			<u-form ref="uForm" :rules="rules" :model="registerForm" :errorType="errorType">
				<u-form-item required label-width="150" label="账号" prop="username">
					<u-input type="text" placeholder="账号" v-model="registerForm.username"></u-input>
				</u-form-item>
				<u-form-item required label-width="150" label="密码" prop="password1">
					<u-input type="password" placeholder="密码" v-model="registerForm.password1"></u-input>
				</u-form-item>
				<u-form-item required label-width="150" label="确认密码" prop="password2">
					<u-input type="password" placeholder="密码" v-model="registerForm.password2"></u-input>
				</u-form-item>
			</u-form>
			<view class="padding flex flex-direction">
				<button @click="onSubmit" class="cu-btn bg-blue shadow lg" type="primary">立即注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message', 'toast'],
				registerForm: {
					username: '',
					password1: '',
					password2: '',
					nickname: '',
					gold: 0,
					grade: 0,
					userType: '',
					avatar: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hzqasl/7ff730f0-f4d1-11ea-b680-7980c8a877b8.png"
				},
				rules: {
					username: [{
							required: true,
							message: '账号为必填！',
							trigger: 'blur'
						},
						{
							trigger: 'blur',
							asyncValidator: (rule, value, callback) => {
								const pattern = /^[_a-zA-Z0-9-]{3,20}$/
								if (!pattern.test(value)) {
									callback(new Error('账号必须为3-20位组合,只能使用英文、数字、减号或下划线'))
									return
								}
								// 校验用户是否存在!
								uniCloud.callFunction({
									name: 'user-center',
									data: {
										action: 'checkUserName',
										params: {
											username: value,
										}
									}
								}).then(response => {
									const {
										code
									} = response.result.data
									if (code === 200) {
										callback()
									} else {
										callback(new Error('用户名已存在'))
									}
								})
							},
						}
					],
					password1: [{
							required: true,
							message: '密码为必填！',
							trigger: 'blur'
						},
						{
							min: 6,
							message: '不低于6个字符',
							trigger: 'blur'
						}
					],
					password2: [{
							required: true,
							message: '确认密码为必填！',
							trigger: 'blur'
						},
						{
							trigger: 'blur',
							validator: (rule, value, callback) => {
								if (value !== this.registerForm.password1) {
									callback(new Error('两次密码不一致！'))
								} else {
									callback()
								}
							},
						}
					]
				},
				getUserInfo: {}
			};
		},
		onLoad(option) {
			this.init()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules) //必需
		},
		methods: {
			init() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确认授权获取用户名称头像？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.getUserProfile({
								desc: '获取你的昵称、头像、地区及性别',
								success: function(ress) {
									console.log('getUserInfo', ress)
									that.getUserInfo = ress.userInfo
								},
								fail: function(res_f) {
									console.log(res_f)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onSubmit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uniCloud.callFunction({
							name: 'user-center',
							data: {
								action: 'register',
								params: {
									username: this.registerForm.username,
									password: this.registerForm.password2,
									nickname: this.getUserInfo.nickName || this.registerForm.username,
									gold: 0,
									grade: 0,
									gender: 0,
									userType: '',
									avatar: this.getUserInfo.avatarUrl ||
										"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hzqasl/7ff730f0-f4d1-11ea-b680-7980c8a877b8.png"
								}
							}
						}).then(response => {
							uni.showModal({
								showCancel: false,
								content: response.result.msg
							})
							if (response.result.code === 0) {
								const params = {
									username: this.registerForm.username,
									password: this.registerForm.password2
								}
								this.$store.dispatch('login', params).then(res => {
									uni.reLaunch({
										url: '/pages/index/index',
									})
								}).catch((err) => {
									console.log(err)
								})
							}
						})
					} else {
						return false
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.yzmDisable {
		background-color: #eee;
		color: #999;
	}

	.regBox {
		position: absolute;
		top: 50%;
		left: 30upx;
		right: 30upx;
		margin-top: -390upx;
		padding: 30upx 70upx;
		background-color: #fff;
		border-radius: 20upx;
	}

	.regBg {
		background: linear-gradient(#29cee8, #619ad6);
		position: absolute;
		top: 0upx;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
	}
</style>
